<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">10</button>

    <script>

        var oBtn = document.getElementById('btn');

        // oBtn.onclick = function () {
        //     // 计时
        //     var t = setInterval(function () {
        //         oBtn.innerHTML++;
        //     }, 1000)
        // }



        // 定时器叠加的过程？？？
        // 15s   0ms   点击了一下，出现一个定时器      1s之后  ++    16s   0ms        1
        // 15s   20ms  点击了一下，又出现了一个定时器  1s之后   ++    16s  20ms       2
        //                                                 17s   0ms        3
        //                                                 17s   20ms       4



        // 解决方案
        //   1 点击的时候，检查一下是否已经点过了，如果已经点了就不再点

        // 假设法  搞一个开关
        var flag = true;  // 判断是否可以点击
        oBtn.onclick = function () {
            if (flag) {
                // 点过之后就把状态改为false
                flag = false;
                var t = setInterval(function () {
                    oBtn.innerHTML--;
                    if (oBtn.innerHTML == 0) {
                        clearInterval(t);
                        flag = true;
                        oBtn.innerHTML = 10;
                    }
                }, 500)
            }
        }


    </script>

</body>

</html>